import { FC, useEffect, useState, ReactElement } from 'react'
import { Table, Progress, Form, Select } from 'antd'
import { connect, AccountModelState, Dispatch, Location } from 'umi'
import { onlyKey } from '@/utils'
import styles from './index.less'
interface IProps {
  dispatch: Dispatch
  accountModel: AccountModelState
  location: Location
}

const { Option } = Select

const AccountPage: FC<IProps> = ({
  dispatch,
  accountModel,
  location
}): ReactElement => {
  const { batchCode } = location.query as { batchCode: string }
  const { distributeInfo, gradeInfo } = accountModel
  const [grade, setGrade] = useState<string>('')

  const [dataSource, setDataSource] = useState<any[]>([])

  const columns: any[] = [
    {
      title: '序号',
      dataIndex: 'index',
      key: 'index',
      render: (text: string, record: any, index: number) => {
        return <span>{(index + 1).toString()?.padStart(2, '0')}</span>
      },
      align: 'center',
      onCell: (record: any, rowIndex: number): any => {
        if (record.show) {
          return {
            rowSpan: record.rowSpan
          }
        }
        return {
          rowSpan: 0
        }
      }
    },
    {
      title: '指标名称',
      dataIndex: 'name',
      key: 'name',
      align: 'center',
      onCell: (record: any, rowIndex: number) => {
        if (record.show) {
          return {
            rowSpan: record.rowSpan
          }
        }
        return {
          rowSpan: 0
        }
      }
    },
    {
      title: '评审方式',
      dataIndex: 'type',
      key: 'type',
      align: 'center',
      onCell: (record: any, rowIndex: number) => {
        if (record.show) {
          return {
            rowSpan: record.rowSpan
          }
        }
        return {
          rowSpan: 0
        }
      }
    },
    {
      title: '账号',
      dataIndex: 'reviewerName',
      key: 'reviewerName',
      align: 'center'
    },
    {
      title: '密码',
      dataIndex: 'passWord',
      key: 'passWord',
      align: 'center'
    },
    {
      title: '分配数量',
      dataIndex: 'total',
      key: 'total',
      align: 'center'
    },
    {
      title: '已评数量',
      dataIndex: 'finish',
      key: 'finish',
      align: 'center'
    },
    {
      title: '评审进度',
      dataIndex: 'progress',
      key: ' progress',
      align: 'center',
      render: (text: string, record: any) => {
        return (
          <>
            {record.reviewerName ? (
              <Progress
                percent={
                  Math.round((record.finish / record.total) * 10000) / 100
                }
              />
            ) : null}
          </>
        )
      }
    }
  ]

  const onchange = (e: string) => {
    setGrade(e)
    getDistributeInfo(e)
  }

  const getDistributeInfo = (grade: string) => {
    dispatch({
      type: 'accountModel/function_getDistributeInfo',
      payload: {
        batchCode,
        grade
      }
    })
  }

  // 批次学段信息
  const getBatchGradeInfo = () => {
    dispatch({
      type: 'accountModel/function_getBatchGradeInfo',
      payload: {
        batchCode
      }
    })
  }

  useEffect(() => {
    getBatchGradeInfo()
  }, [])

  useEffect(() => {
    if (distributeInfo.length) {
      let temp: any[] = []
      distributeInfo.forEach((item) => {
        if (item.children) {
          item.children.forEach((v, index: number) => {
            let obj: any = {
              ...item,
              ...v,
              key: onlyKey()
            }
            delete obj.children
            if (index == 0) {
              obj.show = true
              obj.rowSpan = item.children.length
            } else {
              obj.show = false
            }
            temp.push(obj)
          })
        } else {
          let obj = { ...item, show: true, rowSpan: 1, key: onlyKey() }
          temp.push(obj)
        }
      })
      setDataSource(temp)
    }
  }, [distributeInfo])

  useEffect(() => {
    if (gradeInfo.length) {
      setGrade(gradeInfo[0].code)
      getDistributeInfo(gradeInfo[0].code)
    }
  }, [gradeInfo])

  return (
    <>
      <div className={styles['page-wrapper']}>
        <div className={styles['account-pannel']}>
          <div className={styles['pannel-title']}>
            <span className={styles.title}>评审进度</span>
            <div className={styles['btn-wrappper']}></div>
          </div>
          <div className={styles['pannel-content']}>
            <div className={styles['form-wrapper']}>
              <Form>
                <Form.Item label="学段">
                  <Select
                    placeholder="请选择学段"
                    style={{ width: '200px' }}
                    value={grade}
                    onChange={onchange}
                  >
                    {gradeInfo.map((item) => (
                      <Option value={item.code} key={item.code}>
                        {item.name}
                      </Option>
                    ))}
                  </Select>
                </Form.Item>
              </Form>
            </div>

            <Table
              dataSource={dataSource}
              columns={columns}
              pagination={false}
            />
          </div>
        </div>
      </div>
    </>
  )
}

const mapStateToProps = ({
  accountModel
}: {
  accountModel: AccountModelState
}) => {
  return {
    accountModel
  }
}

export default connect(mapStateToProps)(AccountPage)
